<template>
	<view class="page">
		<swiper
			class="swiper-box"
			:autoplay="true"
			:interval="3000"
			:duration="1000"
			:indicator-dots="details.pics && details.pics.length > 1"
			indicator-color="#fff"
			indicator-active-color="rgba(255, 255, 255, .6)">
			<swiper-item
				v-for="(item,i) in details.pics"
				:key="i">
				<view
					class="swiper-item"
					@click="onClickImg(i)">
					<image
						:src="item"
						mode="aspectFit"
						:style="{backgroundColor:item}"
						class="swiper-img" />
				</view>
			</swiper-item>
		</swiper>
		
		<view class="goods-info">
			<view class="info-box">
				<view class="price-sale">
					<view class="info-price">
						<text class="price">￥{{ details.sell_price }}</text>
						<!-- <text class="price2">￥{{ details.market_price }}</text> -->
					</view>
					<view class="sale">{{ details.sales }}人已购买</view>
				</view>
				<view class="info-name">
					<text>{{ details.title }}</text>
				</view>
				<view class="info-desc">
					<text>{{ '我是副标题' }}</text>
				</view>
			</view>
		</view>
		
		<view class="goods-detail">
			<view class="thead">
				<view class="title">
					<text>product detail</text>
				</view>
				<view class="line">
					<text>商品详情</text>
				</view>
			</view>
			<!-- <view class="flex">
				<view
					:class="['label',i==btnIndex? 'selectBtn':'']"
					v-for="(item,i) in btnList"
					@click="onChangeBtn(i)"
					:key="i">{{item}}</view>
			</view> -->
			<!-- 详情 -->
			<view v-show="btnIndex==0" v-html="details.content"></view>
			<!-- 评论 -->
		</view>

		
		<view
			class="buy-bar"
			style="">
			<view class="inner">
				<!-- #ifdef APP-PLUS -->
				<view class="btm-item">
					<image
						src="https://wx.2024csnl.com/static/business/home.png"
						mode="aspectFill"
						class="btm-hone" />
					<view @click="toHome()">首页</view>
				</view>
				<view class="btm-item">
					<image
						src="https://wx.2024csnl.com/static/business/shop.png"
						mode="aspectFill"
						class="btm-hone" />
					<view @click="toBusinessHome()">进店</view>
				</view>
				<!-- #endif -->
				<view class="btns">
					<view
						v-if="false"
						class="btn"
						@click="onGoBuyNow('addCar')">加入购物车</view>
					<view
						class="btn"
						@click="onGoBuyNow('goBuy') ">立即购买</view>
				</view>
			</view>
		</view>
		
		<image
			v-if="kefu_link"
			src="https://wx.2024csnl.com/static/chat.png"
			@click="goToUrl(kefu_link)"
			mode="widthFix"
			style="width: 100rpx; position: fixed; right: 30rpx; bottom: 180rpx;">
		</image>
		
		<uni-popup ref="popupShare" type="bottom">
			<view class="popupBigBox">
				<view class="pop-box">
					<view class="between align invite-box">
						<!--  #ifdef APP-PLUS -->
						<!-- 微信 -->
						<view class="invite-btn flex" @click="onShare('WXSceneSession')">
							<image src="https://wx.2024csnl.com/static/weixin.png"></image>
							<view>分享至微信</view>
						</view>
						<!-- 朋友圈 -->
						<view class="invite-btn flex" @click="onShare('WXSceneTimeline')">
							<image src="https://wx.2024csnl.com/static/pengyouquan.png"></image>
							<view>分享至朋友圈</view>
						</view>
						<!--  #endif -->
						<!-- 复制 -->
						<view class="invite-btn flex" @click="copyCode()">
							<image src="https://wx.2024csnl.com/static/lianjie.png"></image>
							<view>复制链接</view>
						</view>
					</view>
				</view>
				<view class="cancelBtn" @click="close('popupShare')">
					取消
				</view>
			</view>
		</uni-popup>
		
		<uni-popup
			ref="popup"
			type="bottom"
			data-label="商品购买弹框"
			style="z-index: 999;">
			<view class="buy-pop-box">
				<view class="inner">
					<view class="thead">
						<view class="cover">
							<image
								:src="popupData.pic"
								mode="aspectFill"
								class="" />
						</view>
						<view class="exp">
							<view class="name">
								<text>{{popupData.name}}</text>
							</view>
							<view class="price-stock">
								<view class="price">
									<text>￥{{popupData.sell_price}}</text>
								</view>
								<view class="stock">
									<text>库存：</text>
									<text>3333</text>
									<text>件</text>
								</view>
							</view>
						</view>
						<view
							class="close"
							@click="close('popup')">
							<image
								src="https://wx.2024csnl.com/static/goods/detail-close.png"
								mode="aspectFill"
								class="close-icon" />
						</view>
					</view>
					<view class="tbody">
						<view
							v-for="(item,index) in specificationList"
							:key="index"
							class="rows">
							<view
								:class="['tag-label']"
								style="">{{item.title}}</view>
							<view class="tag-value">
								<view
									@click="selectSpec(index,i)"
									:class="[
										'g-tag',
										{
											'is-active': i==selectSpecification[item.k]
										}
									]"
									v-for="(v,i) in item.items">
									<text>{{v.title}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="tfoot">
						<view class="tag-label">数量</view>
						<view class="tag-value">
							<view class="tag-iconbox">
								<view class="tag-box" @click="setCartNum('sub')">
									<image
										src="https://wx.2024csnl.com/static/goods/move.png"
										mode="aspectFill"
										class="tag-icon" />
								</view>
								<view class="tag-num">{{cartNum}}</view>
								<view class="tag-box" @click="setCartNum('add')">
									<image
										src="https://wx.2024csnl.com/static/goods/add.png"
										mode="aspectFill"
										class="tag-icon" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="button">
					<button class="confirm-btn" @click="onSubBtn">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getCommodityDetails,
		getSpecification,
		getPersonalCenter,
		setShoppingCart,
	} from "../../api/index.js"
	export default {
		data() {
			return {
				kefu_link: '',
				id: 0,
				bid: 0,
				yqcode: '',
				centerMsg: {},
				btnList: ['宝贝详情'], //, '评论'
				btnIndex: 0,
				cartNum: 1, //加购数量
				popupData: {}, //当前选取规格详情
				selectSpecification: [], //当前选取的规格
				specificationList: [], //规格列表
				specificationDetails: {}, //对应规格详情列表
				details: {},
				swiperList: [],
				btnType: '', //按钮状态
				// pageType:'',//页面状态,暂时只用于区别是否为积分(泌豆)购买,积分(泌豆)的话支付方式没有积分支付
			}
		},
		onNavigationBarButtonTap(e) {
			this.open("popupShare")
		},
		async onLoad(opt) {
			const sessionData = uni.getStorageSync('sessionData')
			if (!sessionData || !sessionData.session_id) {
				uni.showLoading({
					title: '请登录...'
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/loginAndRegister'
					})
				}, 100)
				return;
			}
			this.id = opt.id
			this.yqcode = opt.yqcode
			this.onGetCommodityDetails(opt.id)
			this.onGetSpecification(opt.id)

			// #ifndef H5
			await this.onGetPersonalCenter()
			// #endif
		},
		onShow() {

			try {
				uni.setStorageSync('vplay', 'true');
			} catch (e) {

			}
			this.btnIndex = 0
		},
		onBackPress() {

		},
		methods: {
			goToUrl(url) {
				uni.navigateTo({
					url: `/business/pages/business_tab/web?url=${encodeURIComponent(url)}`
				})
			},
			toHome() {
				this.$toPage(getApp().globalData.HOME_PAGE)
			},
			toBusinessHome() {
				this.onSkip(`/business/pages/business_tab/home?bid=${this.bid}`)
			},
			onShare(type) {
				var BASE_URL = getApp().globalData.BASE_URL
				uni.showLoading({
					title: '加载中...'
				})
				setTimeout(() => {
					uni.hideLoading();
				}, 2000);
				uni.share({
					provider: "weixin",
					href: `${BASE_URL}/h5/#/pages/goods/goods-detail?id=${this.id}&yqcode=${this.centerMsg.yqcode}&pageType=商家列表`,
					scene: type,
					title: this.details.title,
					summary: "何需东奔西跑，来逆伶生物，好东西即刻拥有！",
					type: 0,
					imageUrl: this.details.pics[0],
					success(res) {
						this.showToast('分享成功~');
						this.close('popupShare');
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			// 复制二维码链接
			copyCode(e) {
				var BASE_URL = getApp().globalData.BASE_URL
				uni.setClipboardData({
					data: `${BASE_URL}/h5/#/pages/goods/goods-detail?id=${this.id}&yqcode=${this.centerMsg.yqcode}&pageType=商家列表`,
					success: () => {
						uni.showToast({
							title: "复制成功"
						});
						this.close('popup');
					}
				});
			},
			toReg() {
				uni.reLaunch({
					url: `/pages/login/forgetPassword?yqcode=${this.yqcode}&type=1&isWebpage=true&t=${new Date().getTime()}`
				});
			},
			async onGetPersonalCenter() {
				const res = await getPersonalCenter('s=/ApiZwyRequest/userinfo')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.centerMsg = data
				}
			},
			onChangeBtn(i) {
				this.btnIndex = i
				if (this.btnIndex == 1) {
					this.onSkip(`/pages/goods/commentlist?proid=${this.details.proid}`)
				}
			},
			// 立即购买||加入购物车
			async onGoBuyNow(type) {
				// // #ifdef H5
				// if (this.yqcode) {
				// 	uni.reLaunch({
				// 		url: `/pages/login/forgetPassword?yqcode=${this.yqcode}&type=1&isWebpage=true&t=${new Date().getTime()}`
				// 	});
				// } else {
				// 	uni.reLaunch({
				// 		url: `/pages/login/forgetPassword?type=1&isWebpage=true&t=${new Date().getTime()}`
				// 	});
				// }
				// // #endif
				this.open('popup')
				this.btnType = type
			},
			// 点击确认按钮
			async onSubBtn() {
				if (this.btnType == 'goBuy') {
					const {
						proid,
						id
					} = this.popupData
					let str = `${proid},${id},${this.cartNum}`
					this.onSkip(`/pages/goods/order-detail?prodata=${str}`)
				} else {
					this.onSetShoppingCart()
				}
				this.btnType = ''
				this.close('popup')
			},
			// 加入购物车
			async onSetShoppingCart() {
				const {
					proid,
					id
				} = this.popupData
				const res = await setShoppingCart('s=/ApiShop/addcart', {
					proid: proid,
					ggid: id,
					num: this.cartNum
				})
				const {
					data,
					status,
					msg
				} = res.data
				this.showToast(msg)
				// console.log(res, "确认加购")
				if (status == 1) {
					setTimeout(() => {
						this.close('popup')
					}, 500)
				}
			},
			// 加购数量操作
			setCartNum(type) {
				if (type == 'add') {
					this.cartNum += 1
				} else {
					this.cartNum == 1 ? this.cartNum = 1 : this.cartNum -= 1
				}
			},
			// 放大轮播图
			onClickImg(i) {
				this.previewImage(i, this.details.pics)
			},
			// 选择规格
			selectSpec(index, i) {
				this.selectSpecification[index] = i
				console.log(this.selectSpecification, "this.selectSpecification")
				this.getOneSpecificationDetails()
			},
			// 当前规格详情
			getOneSpecificationDetails() {
				let str = this.selectSpecification.join(',')
				this.popupData = this.specificationDetails[str]
			},
			// 规格详情
			async onGetSpecification(id) {
				const res = await getSpecification(`s=/ApiShop/getproductdetail`, {
					id: id
				})
				const {
					ggselected,
					guigedata,
					guigelist,
					status,
					msg
				} = res.data
				console.log(res, "规格")
				if (status == 1) {
					this.specificationList = guigedata
					this.specificationDetails = guigelist
					this.selectSpecification = ggselected
					this.getOneSpecificationDetails()
				} else {
					this.showToast(msg)
				}
			},
			// 商品详情
			async onGetCommodityDetails(id) {
				const res = await getCommodityDetails(`s=/ApiShop/product&id=${id}`)
				const {
					status,
					msg,
					title,
					product,
					business
				} = res.data
				console.log(res, "详情")
				const content = JSON.parse(product.detail)
				const guigedata = JSON.parse(product.guigedata)
				if (status == 1) {
					this.bid = product.bid;
					this.kefu_link = business.kefu_link;
					this.details = {
						title: title,
						content: content[0].content,
						market_price: product.market_price,
						sell_price: product.sell_price,
						sales: product.sales,
						pics: product.pics,
						proid: product.id
					}
				} else {
					this.showToast(msg)
				}
			},
			open(n) {
				this.$refs[n].open();
			},
			close(n) {
				this.$refs[n].close();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		position: relative;
		background: #f8f8f8;
	}
	
	.swiper-box {
		position: relative;
		width: 100vw;
		height: 100vw;
		.swiper-item {}
		.swiper-img {
			display: block;
			width: 100vw;
			height: 100vw;
		}
	}
	
	.goods-info {
		position: relative;
		background: #fff;
		padding: 20rpx 20rpx;
		.info-box {
			position: relative;
		}
		.price-sale {
			display: flex;
			align-items: center;
			line-height: 60rpx;
			.price {
				font-size: 40rpx;
				color: #E86A33;
				font-weight: bold;
				&::first-letter {
					font-size: 30rpx;
				}
			}
			.sale {
				margin-left: 20rpx;
				color: #999999;
			}
		}
		.info-name {
			margin: 10rpx 0;
			line-height: 40rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #000;
		}
		.info-desc {
			line-height: 40rpx;
			margin: 10rpx 0 0;
			color: #999;
		}
	}
	
	.goods-detail {
		position: relative;
		background: #fff;
		margin: 20rpx 0;
		padding: 40rpx 0;
		.thead {
			margin-bottom: 40rpx;
			text-align: center;
			.title {
				line-height: 80rpx;
				font-size: 44rpx;
				font-weight: bold;
				text-transform: uppercase;
				color: #000;
			}
			.line {
				font-size: 32rpx;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: center;
				&:before,
				&::after {
					content: '';
					width: 15vw;
					height: 1rpx;
					border-top: 1px solid #dddddd;
					margin: 0 30rpx;
				}
			}
		}
	}
	
	.buy-bar {
		position: relative;
		.inner {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 100;
			padding: 20rpx 0;
			background: #fff;
			.btns {
				display: flex;
				align-items: center;
				position: relative;
				.btn {
					flex: 1;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 90rpx;
					margin: 20rpx;
					background: -webkit-linear-gradient(left, #41644A, #263A29);
					text-align: center;
					font-size: 32rpx;
					color: #fff;
				}
			}
		}
	}
	
	.buy-pop-box {
		position: relative;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx;
		z-index: 200;
		.button {
			.confirm-btn {
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 90rpx;
				margin: 20rpx;
				background: -webkit-linear-gradient(left, #41644A, #263A29);
				text-align: center;
				font-size: 32rpx;
				color: #fff;
			}
		}
		.inner {
			position: relative;
			.thead {
				position: relative;
				display: flex;
				align-items: center;
				.cover {
					image {
						display: block;
						width: 180rpx;
						height: 180rpx;
						background: #eee;
						border-radius: 20rpx;
					}
				}
				.exp {
					flex: 1;
					margin: 0 80rpx 0 20rpx;
					.name {
						height: 80rpx;
						line-height: 40rpx;
						text-align: justify;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						text {
							font-size: 30rpx;
							font-weight: bold;
						}
					}
					.price-stock {
						margin-top: 40rpx;
						margin-right: -60rpx;
						display: flex;
						align-items: center;
						.price {
							flex: 1;
							color: #E86A33;
							font-weight: bold;
							font-size: 36rpx;
						}
						.stock {
							line-height: 40rpx;
							color: #999;
						}
					}
				}
				.close {
					position: absolute;
					top: 0;
					right: 0;
					padding: 20rpx;
					image {
						display: block;
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
			.tbody {
				.rows {
					margin: 20rpx 0;
				}
				.tag-label {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
				}
				.tag-value {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					.g-tag {
						height: 60rpx;
						line-height: 60rpx;
						border-radius: 60rpx;
						padding: 0 30rpx;
						color: #333;
						background: #f8f8f8;
						&.is-active {
							background: #E86A33;
							color: #fff;
						}
					}
				}
			}
			.tfoot {
				display: flex;
				align-items: center;
				.tag-label {
					flex: 1;
					line-height: 80rpx;
					font-size: 30rpx;
				}
				.tag-value {}
				.tag-iconbox {
					display: flex;
					align-items: center;
				}
				.tag-box {
					padding: 20rpx;
					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
						border: 1px solid #aaa;
						padding: 10rpx;
						border-radius: 6rpx;
					}
				}
				.tag-num {
					height: 80rpx;
					line-height: 80rpx;
					padding: 0 20rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>